<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/9/20.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/hover.css">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-base.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-index.css">


</head>
<body class="childrenBody">

<div class="row">
    <div class="col-lg-12">
        <!--nav 部件-->
        <div class="nav_list_2" style="margin-bottom: 20px">
            <div class="text_title">2019年“求学圆梦”春季补贴登记摸查</div>
            <span>最后更新时间 2018-10-12</span>
            <div class="right_btn_list">
                <a href="javascript:;" class="btn_item active"><span>全部导出</span></a>
            </div>

        </div>
    </div>
</div>

<div class="sc_item" >
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <!--nav 部件-->
            <div class="nav_list_2">
                <form class="form-inline" style="float: left;height: 50px">
                    <div class="form-group">
                        <select type="text" class="form-control" style="width: 170px">
                            <option value="">开始时间</option>
                            <option value="">xxxxxx</option>
                            <option value="">xxxxx</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select type="text" class="form-control" style="width: 170px">
                            <option value="">结束时间</option>
                            <option value="">xxxxxx</option>
                            <option value="">xxxxx</option>
                        </select>
                    </div>
                </form>
                <div class="right_btn_list">
                    <a href="javascript:;" class="btn_item active"><span>导出此表格</span></a>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="ssgl_list" style="margin-bottom: 20px">
    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th width="5%">姓名</th>
                    <th>手机号</th>
                    <th>院校</th>
                    <th>专业</th>
                    <th>工作单位</th>
                    <th>单位所在地</th>
                    <th>单位电话</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>李二狗</td>
                    <td>098</td>
                    <td>2017-09-17</td>
                    <td>越秀区总工会</td>
                    <td>王敏</td>
                    <td>--</td>
                    <td>15</td>
                    <td>
                        <button class="btn btn-primary btn-sm">查看</button>
                    </td>
                </tr>

                </tbody>
            </table>
            <div class="alert alert-warning text-center">
                <strong>提示!</strong> 还没有数据。
            </div>
        </div>
    </div>
    <div class="row" style="text-align: center">

        <ul class="pager">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
            <li><a href="#">12</a></li>
            <li class="next"><a href="#">下一页 »</a></li>
            <div class="input-group" style="width: 100px;float: left;margin-left: 10px">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">GO</button>
                </span>
            </div>
            <li><div class="pager-label">共 <strong>89</strong> 页</div></li>
        </ul>


    </div>
</div>

<div class="sc_item" >
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <!--nav 部件-->
            <div class="nav_list_2">
                <div class="text_title">在读学历层次</div>
                <div class="right_btn_list">
                    <a href="javascript:;" class="btn_item active"><span>导出此表格</span></a>
                </div>
            </div>
            <div class="zxdt_list row" style="margin: 0 0 20px">
                <div class="col-lg-8 col-md-12">
                    <div id="xt_map" style="height:450px;width: 100%;margin: 0 auto"></div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div style="margin-top: 150px">
                        <table class="table table-bordered table_index" >
                            <thead>
                            <tr>
                                <th>选项</th>
                                <th>比例</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr bgcolor="#f6f8fa">
                                <td>本科</td>
                                <td>22%</td>
                            </tr>
                            <tr bgcolor="#f6f8fa">
                                <td>专科</td>
                                <td>22%</td>
                            </tr>
                            <tr bgcolor="#f6f8fa">
                                <td>受访人数</td>
                                <td>220人</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <!--nav 部件-->
            <div class="nav_list_2">
                <div class="text_title">技能情况</div>
                <div class="right_btn_list">
                    <a href="javascript:;" class="btn_item active"><span>导出此表格</span></a>
                    <a href="javascript:;" class="btn_item active"><span>另存为</span></a>
                </div>
            </div>
            <div class="zxdt_list row" style="margin: 0 0 20px">
                <div class="col-lg-8 col-md-12">
                    <div id="jn_map" style="height:450px;width: 100%;margin: 0 auto"></div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div style="margin-top: 50px;overflow: auto;height: 400px">
                        <table class="table table-bordered table_index" >
                            <thead>
                            <tr>
                                <th>选项</th>
                                <th>比例</th>
                                <th>人数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr bgcolor="#f6f8fa">
                                <td>初级工（在读）</td>
                                <td>22%</td>
                                <td>22人</td>
                            </tr>
                            <tr bgcolor="#f6f8fa">
                                <td>初级工（在读）</td>
                                <td>22%</td>
                                <td>22人</td>
                            </tr>
                            <tr bgcolor="#f6f8fa">
                                <td>初级工（在读）</td>
                                <td>22%</td>
                                <td>22人</td>
                            </tr>
                            <tr bgcolor="#f6f8fa">
                                <td>初级工（在读）</td>
                                <td>22%</td>
                                <td>22人</td>
                            </tr>


                            </tbody>
                        </table>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>



<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/js/zui.min.js"></script>
<script src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/echarts.min.js"></script>

<script type="text/javascript">

    window.addEventListener("resize", function () {
        /*重置图形*/
        xtChart.resize();
        jnChart.resize();
    })

    var xtChart = echarts.init(document.getElementById('xt_map'));
    var jnChart = echarts.init(document.getElementById('jn_map'));


    xyOption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            bottom: '20' ,
            data: ['本科','专科']
        },
        series : [
            {
                name: '系统环境',
                type: 'pie',
                radius : '55%',
                center: ['50%', '45%'],
                color: [ '#EF6294', '#2895DA'],
                data:[
                    {value:335, name:'本科'},
                    {value:310, name:'专科'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    xtChart.setOption(xyOption);


    jnOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['2011年', '2012年']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['专科','本科','初级工（在读）']
        },
        series: [
            {
                name: '选项',
                type: 'bar',
                color: '#616FDC',
                data: [18203, 23489, 29034]
            }
        ]
    };

    jnChart.setOption(jnOption);





</script>

</body>
</html>